import Vue from 'vue'
/*
 *  节流，规定时间内可点击一次（第一次点击有效）。
 *  @param {?Number|300} time - 间隔时间，毫秒
 *  @param {Function} fn - 执行函数
 *  @param {?String|"click"} event - 事件类型 例："click"
 *  @param {Array} binding.value - [fn,event,time]
 *  例：<el-button v-throttle="[resetData,`click`,300]">刷新</el-button>
 *  传递参数则：<el-button v-throttle="[()=>resetData(param),`click`,300]">刷新</el-button>
 */
// 注册一个全局自定义指令 `v-throttle`
Vue.directive('throttle', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    //binding.value，使用自定义指令v-throttle时填写的参数
    //解构赋值，定义了3个变量，将参数（数组）按顺序进行赋值
    let [fn, event = "click", time = 300] = binding.value
    let timer = null;
    el.addEventListener(event, () => {
      //默认监听的事件为click
      //判断计时器是否存在，不存在则执行函数fn，创建计时器
      if (timer == null) {
        fn();
        timer = setTimeout(() => timer = null, time)
      }
    })
  }
})


//方案二
/**
 * 按钮节流
 * 3秒内只有第一次点击有效，防止重复提交数据。
 */
//注册一个全局自定义指令 `v-throttle-disabled`
Vue.directive('throttle-disabled', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted(el, binding) {
    let [event = "click", time = 2 * 1000] = binding.value
    el.addEventListener(event, () => {
      //默认监听click事件
      //当 dom元素el 非禁用状态时 将其设置为禁用状态，同时设置计时器，规定时间后（默认2秒）启用。
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, time)
      }
    })
  }
})
